<template>

    <el-container class="reportReviewItem">

        <el-header v-if="queryParams.length > 0">
            <el-form size="mini" :inline="true">
                <template v-for=" param in queryParams">
                    <el-form-item :label="param.paramLabel" :key="param.paramId">
                        <el-input v-if="param.paramDataType == 'TEXT'" v-model="param.value"></el-input>

                        <el-input-number v-if="param.paramDataType == 'NUMBER'" v-model="param.value"></el-input-number>

                        <el-select
                                v-if="param.paramDataType == 'SINGLE_SELECT' || param.paramDataType == 'MULTIPLE_SELECT'"
                                :multiple="param.paramDataType == 'SINGLE_SELECT' ? false : true"
                                v-model="param.value"
                        >
                            <el-option
                                    v-for="opt in tryParseJson(param.paramDatasourceContent)"
                                    :key="opt.key"
                                    :label="opt.key"
                                    :value="opt.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </template>

                <el-form-item v-if="queryParams.length > 0">
                    <el-button type="primary" @click="doQuery">生成图表</el-button>
                </el-form-item>
            </el-form>
        </el-header>

        <el-main style="height:100%">

            <ChartReview v-if="displayType == 'CHART'" ref="chartView" :reportName="reportDetail.reportName"
                         :templateConf="templateConf" :relations="relations" :reportData="reportData"></ChartReview>

            <TableReview v-if="displayType == 'TABLE'" ref="chartView" :reportName="reportDetail.reportName"
                         :templateConf="templateConf" :relations="relations" :reportData="reportData"></TableReview>

        </el-main>

    </el-container>

</template>

<script>

    import eventBus from '@/eventBus.js';

    import ChartReview from './ChartReview.vue';

    import TableReview from './TableReview.vue';

    export default {
        props: ["reportId"],

        data() {
            return {
                queryParams: [],
                reportData: [],
                templateConf: {},
                relations: [],
                displayType: '',
                reportDetail: {},
                styleOptions: []
            };
        },

        components: {
            ChartReview,
            TableReview
        },

        mounted() {

            this.loadReportQueryParams();

            eventBus.$on("refreshReportStyle",(style)=>{

                this.templateConf.templateStyleOptions = style;

            });

            eventBus.$on("persistentReportStyle",(style)=>{

                //this.templateConf.templateStyleOptions = style;

                //保存样式到数据库

                this.persistentStyle(style);

            });

        },

        beforeDestroy(){

            eventBus.$off("refreshReportStyle");

            eventBus.$off("persistentReportStyle");

        },
        methods: {


            persistentStyle(style) {


                let params = new URLSearchParams();

                params.append("reportId",this.reportId);
                params.append("reportStyle",JSON.stringify(style));

                this.$axios.post("/report/updateReportStyle",params)
                    .then(d=>{

                        this.$notify({
                            title: '提示',
                            message: '样式保存成功',
                            type:'success'
                        });

                    }).catch(e=>{

                    this.$notify.error({
                        title: "失败",
                        message: "样式保存失败"
                    });
                });


            },


            resize() {

                if (this.displayType == "CHART") {

                    this.$refs.chartView.resize();
                }

            },

            tryParseJson(str) {
                try {
                    return JSON.parse(str);
                } catch (e) {
                    return [];
                }
            },


            doQuery() {


                let params = {
                    reportId: this.reportId,
                    params: {}
                };

                for (let index in this.queryParams) {
                    let val = this.queryParams[index].value;

                    if (val == undefined) {
                        val = "";
                    }

                    params.params[this.queryParams[index].paramName] = val;
                }

                this.$axios
                    .post("/report/doQuery", params)
                    .then(d => {
                        this.reportData = d.data;

                        if (this.displayType == 'CHART') {

                            this.$refs.chartView.displayReport();
                        }

                    })
                    .catch(e => {

                        this.$notify.error({
                            title: "失败",
                            message: "查询失败"
                        });
                    });
            },


            loadRelations() {
                this.$axios
                    .get("/report/getRelations?reportId=" + this.reportId)
                    .then(d => {
                        this.relations = d.data;

                        if (this.queryParams.length == 0) {
                            this.doQuery();
                        }
                    })
                    .catch(e => {
                        this.$notify.error({
                            title: "失败",
                            message: "模板加载失败"
                        });
                    });
            },
            loadReportDetail() {
                this.$axios
                    .get("/report/getReportDetail?reportId=" + this.reportId)
                    .then(d => {

                        this.reportDetail = d.data;


                        //报表的个性化样式
                        //如果没有个性化样式 就显示模板自带样式

                        if(this.reportDetail.reportStyleconfig){

                            this.templateConf.templateStyleOptions =  this.reportDetail.reportStyleconfig;
                        }


                        eventBus.$emit("reportStyleLoaded", this.templateConf.templateStyleOptions);

                        this.loadRelations();
                    })
                    .catch(e => {
                        this.$notify.error({
                            title: "失败",
                            message: "报表信息加载失败"
                        });
                    });
            },

            loadTemplate() {
                this.$axios
                    .get("/report/getTemplateByReport?reportId=" + this.reportId)
                    .then(d => {
                        this.templateConf = d.data;
                        this.displayType = d.data.displayType;
                        this.loadReportDetail();

//          this.styleOptions = this.templateConf.templateStyleOptions;

                   //     eventBus.$emit("reportStyleLoaded", this.templateConf.templateStyleOptions);

                    })
                    .catch(e => {
                        this.$notify.error({
                            title: "失败",
                            message: "模板加载失败"
                        });
                    });
            },

            loadReportQueryParams() {

                if (this.reportId == '' || this.reportId == undefined) {

                    return;

                }


                this.$axios
                    .get("/report/getReportQueryParams?reportId=" + this.reportId)
                    .then(d => {
                        this.queryParams = d.data;

                        this.loadTemplate();

                    })
                    .catch(e => {
                        this.$notify.error({
                            title: "失败",
                            message: "参数加载失败"
                        });
                    });
            }
        }

        ,
        watch: {
            reportId(nv, ov) {

                this.loadReportQueryParams();
            }
        }

    };
</script>

<style scoped>
    .reportReviewItem {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .header {
        display: flex;
        flex-wrap: wrap;
    }

    .main {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
    }
</style>
